<template>
	<view>
		<canvas @touchstart="onTouchStart" @touchmove="onTouchMove" id="m_rating_canvas" canvas-id="m_rating_canvas"
			style="width: 100%;height: 100%;"></canvas>
	</view>
</template>

<script>
	import unselectImgSrc from './ic_mrating_unselect.png'
	import selectedImgSrc from './ic_mrating_selected.png'

	export default {
		name: "m-rate",
		props: {
			paddingLeftRight: {
				type: Number,
				default: 5
			},
			paddingTopBottom: {
				type: Number,
				default: 5
			},
			starSpace: {
				type: Number,
				default: 10
			}
		},
		data() {
			return {
				canvasWidth: 0,
				canvasHeight: 0,
				starHeight: 0,
				rateNum: 5,
				selectNum: 1.5,
				starsInfo: []
			};
		},
		mounted() {
			const query = uni.createSelectorQuery();
			//获取宽度
			query.select('#m_rating_canvas').fields({
				size: true
			}, (res) => {
				this.canvasWidth = res.width
				this.canvasHeight = res.height;
				this.starHeight = this.canvasHeight - this.paddingTopBottom - this.paddingTopBottom

				let left = this.paddingLeftRight
				for (var i = 0; i < this.rateNum; i++) {
					this.starsInfo.push({
						"left": left,
						"right": left + this.starHeight
					})
					left = left + this.starHeight + this.starSpace
				}
			}).exec();

			uni.getImageInfo({
				src: unselectImgSrc
			}).then((res) => {
				console.log("imageInfo:", JSON.stringify(res))
			}).catch((e) => {
				console.log("imageInfo error:", JSON.stringify(e))
			})

			this.drawRatings()
		},
		methods: {
			onTouchStart(e) {
				// console.log("onTouchStart:", JSON.stringify(e))
				// console.log(e.touches[0].x)
				this.setProgress(e.touches[0].x)
			},
			onTouchMove(e) {
				// console.log("onTouchMove:", JSON.stringify(e))
				// console.log(e.touches[0].x)
				this.setProgress(e.touches[0].x)
			},
			onTouchEnd(e) {

			},

			setProgress(touchx) {
				// console.log("starsInfo:", JSON.stringify(this.starsInfo))
				for (var i = this.starsInfo.length - 1; i >= 0; --i) {
					if (touchx > this.starsInfo[i]["left"]) {
						this.selectNum = ((touchx - (this.starsInfo[i]["left"])) / this.starHeight) + i
						break
					}
				}
				if (this.selectNum > this.rateNum) {
					this.selectNum = this.rateNum
				}
				this.drawRatings()
			},

			drawRatings() {
				var context = uni.createCanvasContext("m_rating_canvas")

				//绘制背景图片
				let left = this.paddingLeftRight
				for (var i = 0; i < this.rateNum; i++) {
					context.drawImage(unselectImgSrc, 0, 0, 128, 128, left, this.paddingTopBottom, this.starHeight, this
						.starHeight)
					left = left + this.starHeight + this.starSpace
				}

				//绘制选中的整张图片
				left = this.paddingLeftRight
				let fullNum = Math.floor(this.selectNum)
				for (var i = 0; i < fullNum; i++) {
					context.drawImage(selectedImgSrc, 0, 0, 128, 128, left, this.paddingTopBottom, this.starHeight, this
						.starHeight)
					left = left + this.starHeight + this.starSpace
				}

				//绘制选中的最后一张不完整图片
				let restNum = this.selectNum - fullNum
				context.drawImage(selectedImgSrc, 0, 0, 128 * restNum, 128, left, this.paddingTopBottom, this.starHeight *
					restNum, this.starHeight)

				context.draw()
			},
		}
	}
</script>

<style>

</style>